<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>列表</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            header {
                padding: 0 15px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                height: 70px;
                width: 100%;
                background-color: lightblue;
            }
            header .btn {
                padding: 10px;
                margin-left: 10px;
                border-radius: 5px;
                color: #fff;
                background-color: blue;
            }
            .list {
                margin: 50px auto;
                width: 800px;
                border-radius: 5px;
                text-align: center;
                padding: 10px;
                background-color: #fff;
            }
            table {
                width: 700px;
                margin: 20px auto;
                border: 1px solid;
                border-collapse: collapse;
            }
            table td,
            table th {
                border: 1px solid;
            }
            table tr {
                height: 40px;
            }
            .list .btn {
                display: inline-block;
                background-color: red;
                padding: 3px 5px;
                color: #fff;
                border-radius: 2px;
            }
        </style>
    </head>
    <body>
        <header>
            <div class="username">请您登录</div>
            <div class="btn">退出登录</div>
        </header>
        <main>
            <div class="list">
                <h2>列表</h2>
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>昵称</th>
                            <th>简介</th>
                            <th>性别</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </main>
    </body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        let token = localStorage.getItem("token");
        let username = localStorage.getItem("username");
        if (!token || !username) {
            alert("未登录状态下无法访问");
            location.href = "./login.html";
        } else {
            document.querySelector(".username").innerHTML = username;
            axios
                .get("http://localhost:3000/userInfos", {
                    headers: {
                        Authorization: "Bearer " + token,
                    },
                })
                .then((res) => {
                    let list = res.data.data;
                    document.querySelector(".list tbody").innerHTML = list
                        .map(
                            (item) => `
                         <tr>
                            <td>${item.id}</td>
                            <td>${item.nikename}</td>
                            <td>${item.desc}</td>
                            <td>${item.gender > 0 ? "男" : "女"}</td>
                            <td>
                                <div class="btn" onclick="del('${
                                    item.UserId
                                }')" >删除</div>
                            </td>
                        </tr>
                        `
                        )
                        .join("");
                })
                .catch((error) => {
                    alert(error.message);
                    location.href = "./login.html";
                });
        }

        function del(userid) {
            axios.delete("http://localhost:3000/user/" + userid).then(() => {
                alert("删除成功");
                location.href = location.href;
            });
        }

        document.querySelector("header .btn").onclick = function () {
            localStorage.clear();
            alert("退出登录成功");
            location.href = "./login.html";
        };
    </script>
</html>
